<template>
  <div id="my_account">
    <my-title></my-title>
    <div class="my_account">
        <div class="user_bigAvatar">
            <!-- <img src="../assets/cat.jpg"> -->
            <img :src="userAvatar" >
        </div>
        <div class="my_content clearfix">
            <div class="my_nav lf">
                <ul>
                    <li @click="changeColor=0" :class="{'cgColor':changeColor ===0 }"><router-link to="/mymessage">我的消息({{newmessage}})</router-link></li>
                    <li @click="changeColor=1" :class="{'cgColor':changeColor ===1 }"><router-link to="/othercommentList">我的评论</router-link></li>
                </ul>
            </div>
            <div class="my_list gt">
               <router-view></router-view>                
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import my_title from './my_title';
import {newMessage} from '../api/example'
export default {
    name:'my_account',
    data(){
        return{
            userAvatar:localStorage.newAvatar,
            replyValue:'',
            replyShow:false,
            havenLogin:true,
            newmessage:'',
            changeColor:0
        }
    },
    components:{
        'my-title':my_title,
    },
    created:function(){
        this.judge();
        this.judgeNew();
    },
    methods:{
        // 判断是否登录
        judge: function() {
            if (localStorage.newstoken != "undefined") {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        },
        // 判断新消息个数
        judgeNew:function(){
            newMessage().then(res =>{
                if(res.data.code === 'success'){
                    console.log(res.data)
                    this.newmessage=res.data.count;
                }
            })
        }
    }
}
</script>
<style scoped>
    .my_account{
        padding-bottom:85px;
        background: #F9F9F9;
    }
    .user_bigAvatar{
        position: relative;
        width:127.2px;
    }
    .user_bigAvatar img{
        position: absolute;
        top:-63.6px;
        width:127.2px;
        height:127.2px;
        border-radius: 50%;
    }
    .my_content{
        width:1100px;
        padding-top: 88.3px;
    }
    .my_content .my_nav {
        width: 192px;
        background: #fff;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
        padding: 1px 0;
    }
    .my_content .my_nav li {
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 14px 0;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
    }
    .my_content .my_nav li a{
        display: block;
    }
    .my_content .my_nav li:hover {
        color: #ff8000;
        border-left: 5px solid #ff8000;
    }
    .my_list{
        width:896px;
        background: #FFFFFF;
        padding: 0 30px 30px 30px;
    }
    .comment_content{
        border-bottom:1px solid #DCDCDC;
        padding:21.5px 0 31.8px 0;
    }
    .my_list .comment_content:last-child{
        border:none;
    }
    .comment_content .time{
        font-size: 14px;
        color: #6F6F6F;
    }
    .com_title {
        width: 94%;
    }
    .com_msg,
    .com_content {
        width: 88%;
    }
    .com_header {
        margin-left: 0;
        width: 98%;
    }
    .com_footer{
        font-size: 14px;
        color: #6F6F6F;
    }
    .content {
        display: inline-block;
        margin: 10px 0;
        width: 50%;
        font-size: 16px;
        color: #333333;
    }
    .thumbs_up {
        margin-top: 10px;
        font-size: 14px;
        color: #6f6f6f;
    }
    .thumbs_up img {
        width: 25px;
        height: 25px;
        cursor: pointer;
    }
    .thumbs_up span {
    margin-left: 22px;
    }
    .thumbs_up .goodhand,
    .thumbs_up .badhand {
        color: #6f6f6f;
        margin-left: 6px;
    }
    .com_header .replyBox,.comment-info .replyBox{
        display: block;
        width:90%;
        height:114px;
        background: #FCFCFC;
        border: 1px solid #979797;
        margin: 13.5px auto 0;
        resize:none;
        padding:20px 17px;
        font-size: 14px;
        color: #9B9B9B;
    }
    .replyBtn .rep{
        margin-top: 15px;
        width:110px;
        height:36px;
        line-height: 36px;
        text-align: center;
        background: #FF8000;
        font-size: 16px;
        color: #FFFFFF;
        border:none;
    }
    .my_content .my_nav .cgColor{        
        color: #ff8000;
        border-left: 5px solid #ff8000;
    }
</style>
